<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" :width="1500"  destroy-on-close @closed="$emit('closed')" align-center>
        <el-button type="primary" @click="print">打印</el-button>
        <el-main class="printMain" ref="printMain">
            <div class="title">结账单</div>
            <div class="print_flex"> 
                <div>采购单号: {{detail?.purchase_code}}</div>
                <div style="margin: 0 150px">供方: {{apply?.apply_name}}</div>
                <div></div>
            </div>
            <div class="flex_table">
                <table style="border-collapse: collapse; width: 300px;">
                    <thead>
                        <tr style="height:32px;line-height: 32px;">
                            <th class="table_border">花型</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in flowerList" :key="index">
                            <td class="table_border">{{item}}</td>
                        </tr>
                        <tr>
                            <td class="table_border">合计</td>
                        </tr>
                    </tbody>
                </table>
                <table style="border-collapse: collapse; width: 100%;" v-if="purchase_list">
                    <thead>
                        <tr style="height:32px;line-height: 32px;">
                            <th class="table_border none">采购入库单匹数</th>
                            <th class="table_border">采购入库单米数</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in purchase_list" :key="index">
                            <td class="table_border none">{{item.total_number}}</td>
                            <td class="table_border">{{item.total_meters}}</td>
                        </tr>
                        <tr>
                            <td class="table_border none">{{detail?.purchase_date?.total_number}}</td>
                            <td class="table_border">{{detail?.purchase_date?.total_meters}}</td>
                        </tr>
                    </tbody>
                </table>
                <table style="border-collapse: collapse; width: 100%;" v-if="dye_list">
                    <thead>
                        <tr style="height:32px;line-height: 32px;">
                            <th class="table_border none">染色入库单匹数</th>
                            <th class="table_border">染色入库单米数</th>
                            <th class="table_border">染色缩率</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in dye_list" :key="index">
                            <td class="table_border none">{{item.total_number}}</td>
                            <td class="table_border">{{item.total_meters}}</td>
                            <td class="table_border"></td>
                        </tr>
                        <tr>
                            <td class="table_border none">{{detail?.purchase_dye_date?.total_number}}</td>
                            <td class="table_border">{{detail?.purchase_dye_date?.total_meters}}</td>
                            <td class="table_border">{{dye_shrinkage_rate}}</td>
                        </tr>
                    </tbody>
                </table>
                <table style="border-collapse: collapse; width: 100%;" v-if="process_list">
                    <thead>
                        <tr style="height:32px;line-height: 32px;">
                            <th class="table_border none">加工入库单匹数</th>
                            <th class="table_border">加工入库单米数</th>
                            <th class="table_border">加工缩率</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in process_list" :key="index">
                            <td class="table_border none">{{item.total_number}}</td>
                            <td class="table_border">{{item.total_meters}}</td>
                            <td class="table_border"></td>
                        </tr>
                        <tr>
                            <td class="table_border none">{{detail?.purchase_process_date?.total_number}}</td>
                            <td class="table_border">{{detail?.purchase_process_date?.total_meters}}</td>
                            <td class="table_border">{{process_shrinkage_rate}}</td>
                        </tr>
                    </tbody>
                </table>
                <table style="border-collapse: collapse; width: 100%;" v-if="test_list">
                    <thead>
                        <tr style="height:32px;line-height: 32px;">
                            <th class="table_border none">检验匹数</th>
                            <th class="table_border">检验米数</th>
                            <th class="table_border">检验缩率</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in test_list" :key="index">
                            <td class="table_border none">{{item.total_number}}</td>
                            <td class="table_border">{{item.total_meters}}</td>
                            <td class="table_border"></td>
                        </tr>
                        <tr>
                            <td class="table_border none">{{detail?.purchase_test_date?.total_number}}</td>
                            <td class="table_border">{{detail?.purchase_test_date?.total_meters}}</td>
                            <td class="table_border">{{test_shrinkage_rate}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </el-main>
	</el-dialog>
</template>

<script>
import print from '@/utils/print'
export default {
	emits: ['success', 'closed'],
	data() {
		return {
			dialog: {
				client: false
			},
			mode: "add",
			titleMap: {
				print: '打印',
			},
			visible: false,
            detail: {},
            purchase_list: [],
            dye_list: [],
            process_list: [],
            test_list: [],
            buyer: {},
            apply: {},
            date: this.moment().format('YYYY-MM-DD'),
            dye_shrinkage_rate: "",
            process_shrinkage_rate: "",
            test_shrinkage_rate: "",
            flowerList: [],
		}
	},
	mounted() {
	},
	methods: {
        print(){
            print(this.$refs.printMain)
            setTimeout(()=>{
                this.visible = false
            },500)
        },
		//显示
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this
		},
        async setData(data) {
            var res = await this.$API.business.purchase.order.print_settle.post({id: data.id, purchase_ware_ids: data.purchase_ware_ids});
            this.apply = res.data.apply
            this.plan_type_text = res.data.plan_type == 1 ? '白坯' : res.data.plan_type == 2 ? '半成品' : '成品'
            this.detail = res.data;
            this.purchase_list = res.data.purchase_date?.flower_list
            this.dye_list = res.data.purchase_dye_date?.flower_list
            this.process_list = res.data.purchase_process_date?.flower_list
            this.test_list = res.data.purchase_test_date?.flower_list

            // 计算缩率
            this.dye_shrinkage_rate = (Number(res.data.purchase_dye_date?.total_meters) / Number(res.data.purchase_date?.total_meters)).toFixed(3)
            this.process_shrinkage_rate = (Number(res.data.purchase_process_date?.total_meters) / Number(res.data.purchase_dye_date?.total_meters)).toFixed(3)
            this.test_shrinkage_rate = (Number(res.data.purchase_test_date?.total_meters) / Number(res.data.purchase_process_date?.total_meters)).toFixed(3)
            let array = []
            if(res.data.purchase_process_date?.flower_list.length > 0){
                res.data.purchase_process_date?.flower_list.map(item=>{
                    array.push(item.flower)
                })
            }else if(res.data.purchase_dye_date?.flower_list.length > 0){
                res.data.purchase_dye_date?.flower_list.map(item=>{
                    array.push(item.flower)
                })
            }else {
                res.data.purchase_date?.flower_list.map(item=>{
                    array.push(item.flower)
                })
            }
            this.flowerList = array
        },
	}
}
</script>

<style lang="scss" scoped>
.title {
    font-size: 20px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
}
.print_flex{
    margin-bottom: 10px;
}
td{
    text-align: center;
}
.table_border{
    max-width: 150px;
    border: 1px solid #606266;
    height: 32px;
}
.none {
    border-left: none;
}
table{
    tbody{
        font-size: 13px;
        tr {
            page-break-inside: avoid;
            -webkit-region-break-inside: avoid; 
        }
        tr:last-child{
            page-break-after: avoid;
            
        }
    }
} 
.flex_table{
    display: flex;
    align-content: flex-start;
}
</style>
